<template>
  <div class="attitude-chart-container">
    <div ref="attitudeChartRef" class="chart"></div>
    <div class="orientation-visualization">
      <div class="plane-model">
        <div class="plane" :style="planeStyle">
          <div class="wing"></div>
          <div class="tail"></div>
        </div>
      </div>
      <div class="orientation-info">
        <div class="info-item">
          <label>航向角 (Heading):</label>
          <span>{{ currentAttitude.head.toFixed(1) }}°</span>
        </div>
        <div class="info-item">
          <label>俯仰角 (Elevation):</label>
          <span>{{ currentAttitude.elev.toFixed(1) }}°</span>
        </div>
        <div class="info-item">
          <label>滚转角 (Roll):</label>
          <span>{{ currentAttitude.roll.toFixed(1) }}°</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watch, reactive, computed, nextTick} from 'vue'
import * as echarts from 'echarts'
defineExpose({
  changeTab
})
function changeTab() {
  nextTick(()=>{
    chartInstance.resize()
  })
}
const props = defineProps(['data'])
const attitudeChartRef = ref(null)
const currentAttitude = reactive({
  head: 0,
  elev: 0,
  roll: 0
})
let chartInstance = null

// 计算飞机模型样式
const planeStyle = computed(() => {
  return {
    transform: `
      rotateX(${currentAttitude.roll}deg)
      rotateY(${currentAttitude.head}deg)
      rotateZ(${-currentAttitude.elev}deg)
    `
  }
})

// 初始化图表
onMounted(() => {
  chartInstance = echarts.init(attitudeChartRef.value)
  window.addEventListener('resize', () => chartInstance.resize())
})

// 更新图表
watch(() => props.data, (newData) => {
  if (!chartInstance || !newData.length) return

  // 设置当前姿态（最后一条数据）
  const lastData = newData[newData.length - 1]
  currentAttitude.head = lastData.attitude.head
  currentAttitude.elev = lastData.attitude.elev
  currentAttitude.roll = lastData.attitude.roll

  const timestamps = newData.map(d => d.time.toFixed(3))
  const heading = newData.map(d => d.attitude.head)
  const elevation = newData.map(d => d.attitude.elev)
  const roll = newData.map(d => d.attitude.roll)

  const option = {
    title: {
      text: '姿态变化',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      formatter: (params) => {
        const point = newData[params[0].dataIndex]
        return `
          时间: ${point.time.toFixed(3)}s<br>
          航向: ${point.attitude.head.toFixed(1)}°<br>
          俯仰: ${point.attitude.elev.toFixed(1)}°<br>
          滚转: ${point.attitude.roll.toFixed(1)}°
        `
      }
    },
    legend: {
      data: ['航向角', '俯仰角', '滚转角'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: timestamps,
      name: '时间 (s)',
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '角度 (°)',
      min: -180,
      max: 180
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        type: 'slider',
        start: 0,
        end: 100,
        bottom: -5
      }
    ],
    series: [
      {
        name: '航向角',
        type: 'line',
        data: heading,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#5470c6'
        },
        symbol: 'circle',
        symbolSize: 4
      },
      {
        name: '俯仰角',
        type: 'line',
        data: elevation,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#91cc75'
        },
        symbol: 'circle',
        symbolSize: 4
      },
      {
        name: '滚转角',
        type: 'line',
        data: roll,
        smooth: true,
        lineStyle: {
          width: 2,
          color: '#ee6666'
        },
        symbol: 'circle',
        symbolSize: 4
      }
    ]
  }

  chartInstance.setOption(option)

  // 添加图表点击事件
  chartInstance.off('click')
  chartInstance.on('click', (params) => {
    const point = newData[params.dataIndex]
    currentAttitude.head = point.attitude.head
    currentAttitude.elev = point.attitude.elev
    currentAttitude.roll = point.attitude.roll
  })
}, { deep: true })
</script>

<style scoped>
.attitude-chart-container {
  height: 500px;
  display: flex;
}

.chart {
  flex: 1;
  height: 100%;
}

.orientation-visualization {
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-left: 1px solid #eee;
  color: black;
}

.plane-model {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.plane {
  width: 100px;
  height: 50px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.5s;
}

.plane:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #3a5fcd;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: rotateX(90deg) translateZ(-5px);
}

.wing {
  position: absolute;
  top: 50%;
  left: 20%;
  width: 60px;
  height: 15px;
  background: #3a5fcd;
  border-radius: 5px;
  transform: translateY(-50%) rotateX(90deg);
}

.tail {
  position: absolute;
  top: 50%;
  right: 0;
  width: 20px;
  height: 10px;
  background: #3a5fcd;
  border-radius: 5px;
  transform: translateY(-50%) rotateX(90deg);
}

.orientation-info {
  padding: 10px;
  background: #f9f9f9;
  border-radius: 4px;
}

.info-item {
  margin: 10px 0;
}

.info-item label {
  display: inline-block;
  width: 150px;
  font-weight: bold;
}
</style>